<template>
  <div class="ahpview">
    <div class="top">
      <dv-decoration-8 style="width: 500px; height: 50px" />
      <div class="title">指标体系构建</div>
      <dv-decoration-8 reverse style="width: 500px; height: 50px" />
    </div>
    <div class="content" v-show="show">
      <div id="main"></div>
      <div style="width: 20%" v-show="isVisible">
        <div class="btn-ground">
          <el-button type="primary" @click="gototable(data)"
            >层次分析法</el-button
          >
          <el-button type="primary">导出指标树</el-button>
          <el-button type="primary" @click="isVisible = false">返回</el-button>
        </div>
        <div>
          <div class="content-right">
            <div class="name">节点权重</div>
            <el-input class="content-input" v-model="params.number"></el-input>
          </div>
          <div class="content-right">
            <div class="name">参数名称</div>
            <el-input
              class="content-input"
              v-model="params.name"
              @change="changename(params.name)"
            ></el-input>
          </div>
          <div class="content-right">
            <div class="name">归一化方法</div>
            <el-input class="content-input" v-model="params.func"></el-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      params: {
        number: null,
        name: "null",
        func: "null",
      },
      isVisible: false,
      index: null,
      contextMenuData: [
        {
          label: "添加节点",
          onClick: () => {
            alert("未开发此功能");
          },
        },
      ],
      data: [
        {
          name: "TF算法评估指标体系",
          cr: null,
          ci: null,
          lambdaMax: null,
          children: [
            {
              name: "功能指标",
              value: 1,
            },
            {
              name: "场景适应性指标",
              value: 1,
              children: [{ name: "场景变化适应性", value: 1 }],
            },
            {
              name: "能力指标",
              value: 1,
              children: [
                {
                  name: "突防成功率",
                  value: 1,
                },
                {
                  name: "突防时间",
                  value: 1,
                  ahp: 3,
                },
                {
                  name: "机动能力",
                  value: 1,
                },
              ],
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.getchart();
  },
  methods: {
    //找到修改的节点
    findNode(node, type) {
      if (type == "name") {
        if (node.name === localStorage.getItem("name")) {
          return node;
        }
      }
      if (type == "number") {
        if (node.value == localStorage.getItem("number")) {
          return node;
        }
      }
      if (node.children && node.children.length > 0) {
        for (let child of node.children) {
          let found = this.findNode(child, type);
          if (found) {
            return found;
          }
        }
      }
      return null;
    },
    // 修改节点数据
    updateNode(node, newData, type) {
      let targetNode = this.findNode(node, type);
      if (targetNode) {
        console.log(Object.assign(targetNode, newData), 1111111111);

        Object.assign(targetNode, newData);
      }
    },
    // input框失去焦点时触发
    changename(value) {
      debugger;
      this.updateNode(this.data[0], { name: value }, "name");
      if (!Boolean(value)) {
        this.params.name = "null";
      }
      // 重新调用echarts生成图表
      this.getchart();
    },
    // 跳转到表格页面
    gototable(value) {
      console.log(value[0], "222");

      this.$router.push({
        path: "/about",
        query: { data: JSON.stringify(value) },
      });
    },
    //使用echarts绘制树形图
    getchart() {
      const that = this; // 将全局this赋值给that
      var chart = that.$echarts.init(document.getElementById("main"));
      const option = {
        series: [
          {
            type: "tree",
            data: that.data,
            expandAndCollapse: false, // 点击后是否展开和收起子节点
            right: "20%",
            symbolSize: 7,
            edgeShape: "polyline", // 使用折线
            lineStyle: {
              width: 3, // 线宽
            },
            // 针对label显示的配置
            label: {
              fontSize: 30,
              lineHeight: 60,
              position: "left",
              align: "left",
              color: "#fff",
              backgroundColor: "rgb(46, 134, 193)",
              padding: [3, 20],
              borderRadius: 10,
              borderWidth: 20,
            },
            emphasis: {
              focus: "none",
              label: {
                show: true,
                fontSize: 30,
                color: "#fff",
                backgroundColor: "rgb(46, 134, 193)",
                padding: [3, 20],
                borderRadius: 10,
                borderWidth: 20,
              },
            },
          },
        ],
      };
      chart.setOption(option);
      // echarts图表点击事件
      chart.on("click", function (params) {
        that.isVisible = true; // 是否显示右边的内容
        that.params.name = params.data.name;
        localStorage.setItem("name", params.data.name);
      });
      chart.on("contextmenu", function (params) {
        event.preventDefault();
        that.$contextmenu({
          items: that.contextMenuData,
          event, // 鼠标事件信息
          customClass: "custom-class", // 自定义菜单 class
          zIndex: 3, // 菜单样式 z-index
          minWidth: 230, // 主菜单最小宽度
        });
        return false;
      });
    },
  },
};
</script>

<style>
.ahpview {
  height: 100vh;
  background-color: rgba(21, 67, 96);
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20vh;
}
.title {
  height: 20vh;
  color: rgba(93, 173, 226);
  font-size: 2em;
  text-align: center;
  line-height: 20vh;
}
.content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 79vh;
}
.btn-ground {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
.content-right {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
  .name {
    color: rgba(93, 173, 226);
    width: 30%;
    text-align: right;
  }
  .content-input {
    width: 50%;
    .el-input__inner {
      background-color: rgba(21, 67, 96);
      color: #fff;
      border: 1px solid rgba(21, 80, 100);
    }
  }
}
#main {
  width: 80%;
  height: 100%;
  border: dashed 1px rgba(93, 173, 226);
}
</style>